<!--
	基本信息
	Created by Penglei on 2023/08/10
-->
<template>
	<div class="base-information">
		<el-button class="information_search" @click="onChange">查询</el-button>
		<el-form :model="params" label-width="90px" size="small" :validate-event="false">
			<el-form-item label="结构类型：" class="form-item" prop="structureType0">
				<el-col :span="12">
					<el-form-item prop="structureType0">
						<el-select v-model="params.structureType0" placeholder="请选择" class="form-select"
							@change="structureTypeChange">
							<el-option v-for="item in structureTypeOptions" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="1" class="text-center"><span class="text-gray-500">-</span></el-col>
				<el-col :span="11">
					<el-form-item prop="structureType1">
						<el-select v-model="params.structureType1" placeholder="请选择" class="form-select">
							<el-option v-for="item in structureType1Options" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-divider border-style="dashed" />
			<el-form-item label="区域：" class="form-item" prop="province">
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item prop="province" style="width:100px;">
							<el-select v-model="params.province" placeholder="请选择省" @change="chooseProvince" value-key="id">
								<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item prop="city" style="width:100%;">
							<el-select v-model="params.city" placeholder="请选择市" @change="chooseCity" value-key="id">
								<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item prop="county" style="width:100%;">
							<el-select v-model="params.county" placeholder="请选择县" @change="chooseCounty" value-key="id">
								<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item label="设防情况：" class="form-item" prop="fortification">
				<el-select v-model="params.fortification" placeholder="请选择" class="form-select" style="width: 100%;">
					<el-option v-for="item in fortificationOptions" :key="item.value" :label="item.label"
						:value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="用途：">
				<el-col :span="12">
					<el-form-item prop="purpose0">
						<el-select v-model="params.purpose0" placeholder="请选择" class="form-select" @change="useChange">
							<el-option v-for="item in useOptions" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="1" class="text-center"><span class="text-gray-500">-</span></el-col>
				<el-col :span="11">
					<el-form-item prop="purpose1">
						<el-select v-model="params.purpose1" placeholder="请选择" class="form-select">
							<el-option v-for="item in use1Options" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-row justify="center">
				<el-col :span="12">
					<el-form-item label="年代：" class="form-item" prop="years">
						<el-select v-model="params.years" placeholder="请选择" class="form-select">
							<el-option v-for="item in yearsOptions" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="层数：" class="form-item" prop="cs">
						<el-select v-model="params.cs" placeholder="请选择" class="form-select" :disabled="disabledcs">
							<el-option v-for="item in csOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup name="BaseInformation">
import { getCurrentInstance, nextTick, onMounted } from 'vue';
// 引入行政区划接口
import { getProvince, getChildArea } from '@/api/system/division';
// 引入接口
import { getIdByDataApi } from '@/api/vulnerability';

// 状态管理模块
import useDictStore from "@/store/modules/dict";
// 获取pinia
const dictStore = useDictStore();

// 当前实例
const { proxy } = getCurrentInstance();
// 组件调用事件触发
const emit = defineEmits(['change']);
// 是否初次加载
let initialLoad = true;

// 表单数据
const data = reactive({
	// 表单参数
	params: {
		"purpose0": "", //用途
		"purpose1": "", //用途
		"province": "", //省
		"city": "", //市
		"county": "", //区县
		"structureType0": "", //结构类型 type
		"structureType1": '',
		"fortification": "", //设防情况
		"years": "", //建造年代
		"cs": "", //层数
	},
	// 表单验证规则
	rules: {
		province: [{ required: true, message: '请选择', trigger: 'change' }],
		structureType0: [{ required: true, message: '请选择', trigger: 'change' }],
		structureType1: [{ required: true, message: '请选择', trigger: 'change' }],
		fortification: [{ required: true, message: '请选择', trigger: 'change' }],
		years: [{ required: true, message: '请选择', trigger: 'change' }],
	},
	// 设防情况
	fortificationOptions: [
		//候选值为：请选择、未设防、6度、7度、8度、9度、自设防、其他
		{
			value: '未设防',
			label: '未设防'
		},
		{
			value: '6度',
			label: '6度'
		},
		{
			value: '7度',
			label: '7度'
		},
		{
			value: '8度',
			label: '8度'
		},
		{
			value: '9度',
			label: '9度'
		},
		{
			value: '自设防',
			label: '自设防'
		},
	],
	// 年份
	yearsOptions: [
		// {
		//     value: '全部',
		//     label: '全部'
		// },
		{
			value: '1978年以前',
			label: '1978年以前'
		},
		{
			value: '1978-1989年',
			label: '1978-1989年'
		},
		{
			value: '1989-2001年',
			label: '1989-2001年'
		},
		{
			value: '2001-2010年',
			label: '2001-2010年'
		},
		{
			value: '2010-2016年',
			label: '2010-2016年'
		},
		{
			value: '2016年以后',
			label: '2016年以后'
		},
	],
	// 层数--钢筋混凝土、钢结构、组合结构
	csOptions: [
		{
			value: '1~3层',
			label: '1~3层'
		},
		{
			value: '4-8层',
			label: '4-8层'
		},
		{
			value: '9层以上',
			label: '9层以上'
		},
	],
	// 结构类型-全结构
	structureTypeOptions: [
		{
			value: '砌体结构',
			label: '砌体结构',
			children: [
				{
					value: '砖混结构',
					label: '砖混结构'
				},
				{
					value: '石木结构',
					label: '石木结构'
				},
				{
					value: '砖木结构',
					label: '砖木结构'
				}
			]
		},
		{
			value: '钢筋混凝土结构',
			label: '钢筋混凝土结构',
			children: [
				{
					value: '框架结构',
					label: '框架结构'
				},
				{
					value: '框架-剪力墙结构',
					label: '框架-剪力墙结构'
				},
				{
					value: '剪力墙结构',
					label: '剪力墙结构'
				}
			]
		},
		{
			value: '土木结构',
			label: '土木结构',
		},
		{
			value: '木结构',
			label: '木结构',
		},
		{
			value: '钢结构',
			label: '钢结构',
		},
		{
			value: '工业厂房',
			label: '工业厂房',
			children: [
				{
					value: '砖混结构厂房',
					label: '砖混结构厂房'
				},
				{
					value: '钢筋混凝土结构厂房',
					label: '钢筋混凝土结构厂房'
				},
				{
					value: '钢结构厂房',
					label: '钢结构厂房'
				}
			]
		},
		{
			value: '组合结构',
			label: '组合结构',
		},
		{
			value: '其他',
			label: '其他',
		},
	],
	structureType1Options: [],
	// 用途
	useOptions: [
		{
			value: '第Ⅰ类',
			label: '第Ⅰ类',
			children: [
				{
					value: '住宅',
					label: '住宅'
				},
				{
					value: '公寓',
					label: '公寓'
				},
				{
					value: '学生和职工集体宿舍',
					label: '学生和职工集体宿舍'
				},
				{
					value: '宾馆',
					label: '宾馆'
				},
				{
					value: '招待所',
					label: '招待所'
				},
				{
					value: '其他人员居住场所',
					label: '其他人员居住场所'
				}
			]
		},
		{
			value: '第Ⅱ类',
			label: '第Ⅱ类',
			children: [
				{
					value: '办公室',
					label: '办公室'
				},
				{
					value: '生产车间',
					label: '生产车间'
				},
				{
					value: '教室',
					label: '教室'
				},
				{
					value: '其他工作与学习场所',
					label: '其他工作与学习场所'
				}
			]
		},
		{
			value: '第Ⅲ类',
			label: '第Ⅲ类',
			children: [
				{
					value: '除I、II类以外',
					label: '除I、II类以外'
				}
			]
		}
	],
	use1Options: [],
})
const {
	// 表单数据
	params,
	// 表单验证规则
	rules,
	// 设防情况选项
	fortificationOptions,
	// 年份选项
	yearsOptions,
	// 层数选项
	csOptions,
	// 结构类型选项
	structureTypeOptions,
	structureType1Options,
	// 用途选项
	useOptions,
	use1Options,
} = toRefs(data);

// 行政区划选择
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
/** 获取省列表 */
function getProvinceData() {
	getProvince().then(async response => {
		const { code, data } = response;
		if (code == 200 && data) {
			provinceData.value = data;
			// 选择省份
			if (provinceData.value?.length) {
				chooseProvince(provinceData.value[0]);
			}
		}
	});
}
// 选择省份
function chooseProvince(value) {
	params.value.city = null;
	params.value.county = null;
	params.value.province = value.name;
	cityData.value = [];
	areaData.value = [];
	getChildArea(value.id).then(response => {
		cityData.value = response.data;
		// 选择城市
		if (cityData.value?.length) {
			chooseCity(cityData.value[0]);
		}
	});
}
// 选择城市
function chooseCity(value) {
	params.value.city = value.name;
	params.value.county = null;
	areaData.value = [];
	getChildArea(value.id).then(response => {
		areaData.value = response.data;
		// 选择区县
		if (areaData.value?.length) {
			chooseCounty(areaData.value[0]);
		} else {
			// 表单控件改变
			// onChange();
		}
	});
}
// 选择区县
function chooseCounty(value) {
	params.value.county = value.name;
	// 设置表单控件初始值
	setFormInit();
	// 初次加载
	if (initialLoad) {
		initialLoad = false;
		// 表单控件改变
		onChange();
		// 监听表单控件值改变
		// watch(() => params.value, (val) => {
		// 	onChange();
		// }, {
		// 	deep: true,
		// })
	}
}

// 结构类型选择
const disabledcs = ref(false);
const structureTypeChange = val => {
	const structureTypes = structureTypeOptions.value.find(item => item.value === val);
	if (structureTypes) {
		structureType1Options.value = structureTypes.children;
	}
	params.value.structureType1 = '';
	// 清空用途
	params.value.purpose0 = '';
	params.value.purpose1 = '';
	use1Options.value = [];
	// 设防情况
	params.value.fortification = '';
	fortificationOptions.value = dictStore.fortificationOptions;
	// 年代
	yearsOptions.value = dictStore.yearsOptions;
	// 过滤楼层预选项
	if (val=='钢筋混凝土结构'||val=='钢结构') {
		csOptions.value = dictStore.csOptions;
		disabledcs.value = false;
		// 用途处理
		useOptions.value = dictStore.useOptions;
	} else if(val=='组合结构'){
		// 层数处理
		csOptions.value = dictStore.csOptions.filter((item, index) => index == 2);
		params.value.cs = ''
		disabledcs.value = false;
		// 用途处理
		useOptions.value = [
            {
                value: '第Ⅰ类',
                label: '第Ⅰ类',
                children: [
                    {
                        value: '住宅',
                        label: '住宅'
                    },
                    {
                        value: '公寓',
                        label: '公寓'
                    },
                    {
                        value: '学生和职工集体宿舍',
                        label: '学生和职工集体宿舍'
                    },
                    {
                        value: '宾馆',
                        label: '宾馆'
                    },
                    {
                        value: '招待所',
                        label: '招待所'
                    },
                    {
                        value: '其他人员居住场所',
                        label: '其他人员居住场所'
                    }
                ]
            },
            {
                value: '第Ⅱ类',
                label: '第Ⅱ类',
                children: [
                    {
                        value: '办公室',
                        label: '办公室'
                    },
                ]
            },
        ]
		// 设防情况
		fortificationOptions.value = dictStore.fortificationOptions.filter(item=>(item.value!='未设防'&&item.value!='自设防'));
	}else if(val=='砌体结构'){
		// 层数处理
		csOptions.value = dictStore.csOptions.filter((item, index) => index < 2);
		disabledcs.value = false;
		// 切换类型时，部分类型楼层没有就"9层以上"选项，则清空
		if (params.value.cs == '9层以上') {
			params.value.cs = ''
		}
		// 设防情况
		fortificationOptions.value = dictStore.fortificationOptions;
	}else{
		// 层数处理
		disabledcs.value = true;
		csOptions.value = [];
		params.value.cs = ''
		// 用途
		if(val=='土木结构'||val=='木结构'||val=='其他'){
			useOptions.value = [
            {
                value: '第Ⅰ类',
                label: '第Ⅰ类',
                children: [
                    {
                        value: '住宅',
                        label: '住宅'
                    },
                    {
                        value: '其他人员居住场所',
                        label: '其他人员居住场所'
                    }
                ]
            },
            {
                value: '第Ⅲ类',
                label: '第Ⅲ类',
                children: [
                    {
                        value: '除I、II类以外',
                        label: '除I、II类以外'
                    }
                ]
            }
        ]
		if(val=='土木结构'){
		// 设防情况
		fortificationOptions.value = dictStore.fortificationOptions.filter(item=>item.value=='未设防');
		yearsOptions.value = dictStore.yearsOptions.filter((item, index) => index < 4);
		// 切换类型时，年代--选项，则清空
		if (params.value.years == '2010-2016年'||params.value.years == '2016年以后') {
			params.value.years = ''
		}
		}else if(val=='其他'){
			fortificationOptions.value = dictStore.fortificationOptions.filter(item=>(item.value=='未设防'||item.value=='自设防'||item.value=='6度'));
		}
	}else{
			useOptions.value = [
            {
                value: '第Ⅱ类',
                label: '第Ⅱ类',
                children: [
                    {
                        value: '生产车间',
                        label: '生产车间'
                    },
                ]
            },
        ]
		}
	}
};
// 选择用途
const useChange = val => {
	const use = useOptions.value.find(item => item.value === val);
	if (use) {
		params.value.purpose1 = '';
		use1Options.value = use.children;
	}
};
// 表单控件改变
const onChange = () => {
	// 根据基础信息查出主键
	getData();
}
// 设置表单控件初始值
const setFormInit = () => {
	// 结构类型
	if (structureTypeOptions.value?.length) {
		params.value.structureType0 = structureTypeOptions.value[0].value;
		// 结构类型选择
		structureTypeChange(params.value.structureType0);
		// 结构类型
		if (structureType1Options.value?.length) {
			params.value.structureType1 = structureType1Options.value[0].value;
		}
	}
	// 区域 - 省
	if (provinceData.value?.length) {
		params.value.province = provinceData.value[0].name;
	}
	// 设防情况
	if (fortificationOptions.value?.length) {
		params.value.fortification = fortificationOptions.value[0].value;
	}
	// 用途
	if (useOptions.value?.length) {
		params.value.purpose0 = useOptions.value[0].value;
		// 选择用途
		useChange(params.value.purpose0);
		// 用途
		if (use1Options.value?.length) {
			params.value.purpose1 = use1Options.value[0].value;
		}
	}
	// 建造年代
	if (yearsOptions.value?.length) {
		params.value.years = yearsOptions.value[0].value;
	}
	// 层数
	if (csOptions.value?.length) {
		params.value.cs = csOptions.value[0].value;
	}
}
// 根据基础信息查出主键
const getData = () => {
	const objParams = {
		structureType0: params.value.structureType0 || '',// 结构类型
		structureType1: params.value.structureType1 || '',// 结构类型
		province: params.value.province || '',// 省
		city: params.value.city || '',// 市
		county: params.value.county || '',// 区县
		fortification: params.value.fortification || '',// 设防情况
		purpose0: params.value.purpose0 || '',// 用途
		purpose1: params.value.purpose1 || '',// 用途
		years: params.value.years || '',// 建造年代  1978-1989年
		cs: params.value.cs || '', // 层数 1层
	}
	// console.log(objParams);
	getIdByDataApi({...params.value}).then(res => {
		const { code, data } = res;
		if (code == 200) {
			if(!data){
				proxy.$modal.msgWarning("未查到该结构的数据！！！");
				return;
			}else{
				// 参数变化触发父组件change事件，其他模块重新获取数据
				emit('change', data);
			}
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	//获取省列表
	getProvinceData();
})
</script>

<style lang="scss" scoped>
.base-information {
	position: relative;
	.information_search{
		position: absolute;
		right: 10px;
		top: -20px;
	}
	:deep(.el-form) {
		padding: 20px;
		color: #FFFFFF;

		>.el-form-item {
			margin-bottom: 10px;
		}

		>.el-form-item:first-child {
			height: 30px;
			line-height: 30px;

			.el-form-item__label {
				height: 30px;
				line-height: 30px;
			}

			.el-input__inner {
				height: 30px;
				line-height: 30px;
				font-size: 16px;
			}
		}

		.el-form-item {
			height: 26px;
			line-height: 26px;

			.el-form-item__label {
				height: inherit;
				line-height: inherit;
				font-size: 18px;
				font-weight: 400;
				padding: 0;
				color: inherit;
			}

			.el-select {
				.el-input {
					height: inherit;
					line-height: inherit;

					.el-input__inner {
						background: rgba(255, 255, 255, 0.15);
						color: inherit;
						font-size: 14px;
					}
				}
			}
		}
	}

	.el-divider--horizontal {
		margin: 15px 0;
		border-top-color: #475ADB;
	}
}
</style>